<template>
	<view>
		<!-- 生成 -->
		<!-- 		<hx-navbar title="金世界" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar> -->
		<!-- #ifdef APP-PLUS -->
		<view class="statusbox"></view>
		<!-- #endif -->
		<view class="upload ">

			<view class="" style="text-align: center;">

				<image :src="selImage" v-if="!sumif || taskStatus==2 && selImage!=null" class="image_bor"
					mode="aspectFit" style="">
				</image>
				<image v-else :src="imageurl" mode="scaleToFill"
					style="border-radius: 20rpx;width:680rpx;height: 680rpx;margin: 20rpx auto 0;"> </image>
				<image src="@/static/ai/bottom.png" v-if="taskStatus==2  && selImage" class="dz" mode="widthFix">
				</image>

			</view>
			<view v-if="sumif  " style="margin-top: -500rpx;">
				<view class="">

					<view class="spinner">
						<view
							style="width: 140rpx;position: absolute;color: #ffffff; top: 40%; left:13%;text-align: center;">
							<view class="">
								{{messageState}}...
							</view>
						</view>
						<view class="spinner-container " :class="taskStatus==1?'container1':' '">
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<view class="circle4"></view>
						</view>

						<view class="spinner-container " :class="taskStatus==1?'container2':' '">
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<view class="circle4"></view>
						</view>
						<view class="spinner-container " :class="taskStatus==1?'container3':' '">
							<view class="circle1"></view>
							<view class="circle2"></view>
							<view class="circle3"></view>
							<view class="circle4"></view>
						</view>
					</view>

				</view>
				<!-- 	<view class=""
					style="width: 300rpx;color: #ffffff;z-index: 99;position: absolute;left: 35%;margin: 30rpx auto;">
					剩余生成时间约{{sum}}秒

				</view> -->
			</view>

		</view>
		<view class="mage10" v-if="!sumif"
			style="display: flex; width: 690rpx;margin:0rpx auto;font-size: 30rpx;color:#6C58D5">
			图片 （{{list.length}}）

		</view>
		<view class="mage10" style="width: 690rpx;display: flex;">
			<view class="" style="width: 680rpx; overflow-x: scroll;display: flex;overflow-y: hidden;">
				<view class=""
					style="width: 175rpx;height: 185rpx;position: relative;border-radius: 20prx;margin-right: 30rpx;"
					v-for="(item,index) in list">

					<image v-if="item.imageUrl" :src="item.imageUrl"
						:style="index == tabCurrent? 'border:6rpx solid #6958D5':''"
						@click="selImageClick(index,item.imageUrl)" mode="aspectFit"
						style="border-radius: 20rpx;width: 168rpx;height: 168rpx;position: relative;">
					</image>
					<view class="" v-if="index== tabCurrent && taskStatus==2 && item.imageUrl!=null"
						style="position: absolute;top: 15rpx;right: 10rpx;width: 40rpx;height: 40rpx;background: #6958D5;border-radius: 35rpx;color: white;text-align: center;line-height: 39rpx;font-weight: bold">
						<image src="@/static/ai/yes.png" style="width: 28rpx;z-index: 1;" mode="widthFix"></image>
					</view>
					<image v-if="sumif && !item.imageUrl" :src="imageurl" mode="aspectFill"
						style="border-radius: 30rpx;width: 160rpx;height: 170rpx"></image>

					<view class="" v-if="sumif"
						style="position: absolute;top: 60rpx;color: #ffffff;left: 0rpx;width: 160rpx;text-align: center;">
					{{item.remindMsg}}
					</view>
				</view>

			</view>

		</view>
		<view v-if="prompt!=''" style="width: 690rpx;margin:10rpx auto;font-size: 30rpx;color:#6C58D5">
			画面描述

		</view>
		<view class="mess_xx ">
			{{prompt}}
		</view>

		<view v-if='sumif && taskStatus==1' class="sc " style="margin: 40rpx auto;">
			<view class="one">
				正在生成
			</view>
			<view class="tow">
				<view class="toww">
					{{messageState}}
				</view>
			</view>
		</view>
		<view class="" v-if='!sumif || taskStatus==2'>
			<view class="bh mage10">
				该作品已成功报名参赛，比赛场次编号 {{eventName}}
			</view>
			<view class="sc2 mage10">
				<view class="one" @click="anewClick()" style="border: 1px solid #000;">
					再次参赛
				</view>
				<view class="tow" @click="saveImage()">
					<view class="toww">
						保存图片
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiBaseUrl
	} from '@/config/config.js';
	import customLoad from '@/components/custom_load/custom_load.vue'
	var item;
	export default {
		data() {
			return {
				prompt: '',
				selImage: '',
				aiEventId: '',
				timer: '',
				messageState: "",
				sumif: true,
				mess: 0,
				sum: 10,
				val: "",
				setData: {},
				list: [{
					id: 1,
					ifsel: true,
					iamge: '../../../static/test2.png'
				}, {
					id: 2,
					ifsel: false,
					iamge: '../../../static/logo.png'
				}, ],
				tabCurrent: 0,
				selectColorSize: this.$store.state.selectColorSize, //字体颜色 现在用户边框
				selStyle: [{
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色 现在用户边框
				}],
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色

				imageurl: '../../../static/aipicture/mh.jpg',
				defaultImage: '../../../static/index/level_1.png',
				currentUrl: '',
				imageNumber: '',
				eventName: "",
				taskStatus: '1', //1 生产中   2结束 其他异常
				aiOrderId: '',
				uid: ''
			}
		},
		components: {
			customLoad
		},
	
		onShow() {
			this.$api.userInfo({}, res => {
				if (res.status) {
					this.uid = uni.getStorageSync('aiOrderId').uid
					this.aiOrderId = uni.getStorageSync('aiOrderId').aiOId
					if (res.data.uid == this.uid) {
						this.getPay()
					}
					// uni.setStorage('walletStatue', res.data.walletStatus)
				}
			})
		},
		onLoad: function(val) {
			if (val.aiEventId) {
				this.aiEventId = val.aiEventId
				this.aiOrderId = val.aiOrderId
				this.getAiWorksInfo()
			} else {
				// // #ifdef H5
				// console.log('h5');
				// this.currentUrl = window.location.href;
				// this.aiEventId = this.currentUrl.aiEventId
				// // #endif
			}
		
       
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
			this.getAiWorksInfo()
		},
		mounted() {
			var _this = this

			setTimeout(function() {
				uni.hideLoading();
			}, 2000);
			// 设置定时器，每10秒请求一次接口  
			this.timer = setInterval(this.getAiWorksInfo, 10000); 
		},
		beforeDestroy() {
			// 组件销毁前清除定时器，防止内存泄漏  
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			getPay() {
				//验证支付支付
				var data = {
					aiOrderId: this.aiOrderId
				}
				this.$api.aiCheckPay(data, res => {
					if (res.status) {
						this.aiEventId = res.data.aiEventId
						this.aiOrderId = res.data.aiOrderId
						this.getAiWorksInfo()
						uni.setStorageSync('messageType','')
					} else {
						uni.reLaunch({
							url: '/pages/aipicture/aipicture'
						})
						return
					}

				})
			},
			getAirRemind() {
				this.$api.airRemind(res => {
					if (res.data != null) {
						// /		this.aiEventId = res.data.aiEventId
					}
				})

			},
			saveImage() {
				// 图片地址
				// 非H5环境中
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.selImage, //图片url
					success: () => {
						uni.showToast({
							title: "保存成功",
							icon: "success"
						})
					},	fail: function(err) {
						 uni.showToast({
						 title: '图片保存失败,请检查app是否开启照片权限',
						 	icon: 'none'
						 });
						 console.error(err);
					}
				})
				// #endif
				//H5环境中，也可以提示长按屏幕保存，让用户操作，不执行以下事件
				// #ifdef H5
				if (typeof plus !== "undefined") {
					// 当前运行在H5+环境中
					var down = plus.downloader.createDownload(this.selImage, {}, function(e, a) {
						plus.gallery.save(e.filename, function(e) {
							uni.showToast({
								title: "保存成功",
								mask: true,
							});
						}, function(e) {
							uni.showToast({
								title: "下载失败,请重试",
								mask: true,
							});
						})
					});
					down.start();
				} else {
					var oA = document.createElement("a");
					oA.download = '作品.png'; // 设置下载的文件名，默认是'下载'
					oA.href = this.selImage; //图片url
					document.body.appendChild(oA);
					oA.click();
					oA.remove(); // 下载之后把创建的元素删除
				}
				// #endif
			},
			down(imgsrc) {
				uni.downloadFile({
					url: imgsrc, // 图片的下载链接  
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 临时文件路径  
								success: function() {
									uni.showToast({
										title: '图片保存成功',
										icon: 'success'
									});
								},
								fail: function(err) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
									console.error(err);
								}
							})
						}
					}
				});
			},
			downloadImageOfMp(filePath) {
				let _this = this
				_this.$common.successToShow('保存图片')
				// 先下载到本地
				uni.downloadFile({
					url: filePath,
					success() {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success() {
								_this.$common.successToShow('保存成功')
							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					}
				})
			},
			getAiWorksInfo() {
				var data = {
					aiEventId: this.aiEventId,
					aiOrderId: this.aiOrderId
				}
				this.$api.aiWorksInfo(data, res => {
					if (!res.data) {
						uni.reLaunch({
							url: '/pages/aipicture/aipicture'
						})
						return
					}
					if (res.status) {
						if (res.data.taskStatus == 2 || res.data.taskStatus ==1  ) {
								if(res.data.taskStatus == 2){
									if (this.timer) {
										clearInterval(this.timer);
										this.timer = null;
									}
								}
							this.list = res.data.imageList
							const hasRemindMsgInProgress = this.list.some(item => item.remindMsg);
							// 如果没有找到"生成中"的remindMsg，则进一步检查所有项是否都有imageUrl  
							if (!hasRemindMsgInProgress) {
								this.sumif = false
								if (this.timer) {
									clearInterval(this.timer);
									this.timer = null;
								}
							} else {
								this.messageState = this.list.filter(item => item.remindMsg != undefined).map(item =>
									item.remindMsg)[0];
							}
							this.eventName = res.data.eventName
							this.selImage = this.list.filter(item => item.imageUrl != undefined).map(item => item
								.imageUrl)[0];
							
							this.prompt = res.data.prompt
							this.taskStatus = res.data.taskStatus
						}else{ 
							this.messageState = res.data.remindMsg
							this.$common.errorToShow(res.data.remindMsg);
							uni.redirectTo({
								url: '/pages/aipicture/mine/diamond-list'
							})
						}
					
					} else {
						this.$common.successToShow(res.message)
						if (this.timer) {
							clearInterval(this.timer);
							this.timer = null;
						}
					}

				})
			},
			anewClick() {
				uni.redirectTo({
					url: '/pages/aipicture/accrue_picture/accrue_picture?id=' + this.aiEventId
				})
			},
			selImageClick(index, img) {
				this.selImage = img

				this.tabCurrent = index
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.statusbox {
		height: var(--status-bar-height);
	}

	.mage10 {
		margin: 10rpx auto;
	}

	.upload {
		margin: 40rpx auto;
		width: 690rpx;
		height: 770rpx;
	}

	// 加载
	.spinner {
		margin: 10px auto;
		width: 90px;
		height: 90px;
		position: relative;
	}

	.container1>view,
	.container2>view,
	.container3>view {
		width: 15px;
		height: 15px;
		background-color: #ffffff;

		border-radius: 100%;
		position: absolute;
		-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
		animation: bouncedelay 1.2s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.spinner .spinner-container {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.container2 {
		-webkit-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}

	.container3 {
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.circle1 {
		top: 0;
		left: 0;
	}

	.circle2 {
		top: 0;
		right: 0;
	}

	.circle3 {
		right: 0;
		bottom: 0;
	}

	.circle4 {
		left: 0;
		bottom: 0;
	}

	.container2 .circle1 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.container3 .circle1 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.container1 .circle2 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.container2 .circle2 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	.container3 .circle2 {
		-webkit-animation-delay: -0.7s;
		animation-delay: -0.7s;
	}

	.container1 .circle3 {
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}

	.container2 .circle3 {
		-webkit-animation-delay: -0.5s;
		animation-delay: -0.5s;
	}

	.container3 .circle3 {
		-webkit-animation-delay: -0.4s;
		animation-delay: -0.4s;
	}

	.container1 .circle4 {
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;

	}

	.container2 .circle4 {
		-webkit-animation-delay: -0.2s;
		animation-delay: -0.2s;
	}

	.container3 .circle4 {
		-webkit-animation-delay: -0.1s;
		animation-delay: -0.1s;
	}

	@-webkit-keyframes bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0.0)
		}

		40% {
			-webkit-transform: scale(1.0);

		}
	}

	@keyframes bouncedelay {

		0%,
		80%,
		100% {
			transform: scale(0.0);
			-webkit-transform: scale(0.0);
		}

		40% {
			transform: scale(1.0);
			-webkit-transform: scale(1.0);
		}
	}

	.mess_xx {
		width: 690rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #76738D;
		line-height: 42rpx;
		margin: 12rpx auto;
	}

	.sc {
		width: 690rpx;
		height: 102rpx;
		display: flex;
		justify-content: space-between;

		.one {
			width: 128rpx;
			height: 100rpx;
			font-size: 32rpx;

			font-weight: 500;
			color: #76738D;
			line-height: 100rpx;
		}

		.tow {
			width: 400rpx;
			height: 92rpx;
			text-align: center;
			color: white;
			border-radius: 46rpx;

			.toww {
				border-radius: 46rpx;
				background: linear-gradient(-90deg, #6C58D5, #AA56D7);
				height: 92rpx;
				line-height: 92rpx;

			}
		}
	}

	.sc2 {
		width: 690rpx;
		height: 102rpx;
		display: flex;
		justify-content: space-between;

		.one {
			border: 1px solid rebeccapurple;
			text-align: center;
			width: 268rpx;
			height: 92rpx;
			font-size: 32rpx;
			border-radius: 46rpx;
			font-weight: 500;
			color: #76738D;
			line-height: 92rpx;
		}

		.tow {
			width: 400rpx;
			height: 92rpx;
			text-align: center;

			color: white;
			border-radius: 46rpx;

			.toww {
				background: linear-gradient(-90deg, #6C58D5, #AA56D7);
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;

			}
		}
	}

	.bh {
		// width: 572rpx;
		height: 150rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		text-align: center;
		font-weight: 400;
		color: #9F774B;
		line-height: 246rpx;
	}

	.image_bor {
		line-height: 530rpx;
		border-radius: 36rpx;
		width: 510rpx;
		height: 510rpx;
		margin: 50rpx auto 0;
		border: 5px solid #7954D6;
		z-index: 2;
	}

	.dz {
		width: 569rpx;
		margin-top: -17rpx;
		margin-left: 30rpx;
		z-index: 1;
	}
</style>